<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.title {
				text-align: center;
			}
			.tips{
				width: 210px;
				margin-left: 275px;
			}
			span{
				margin-left:15px ;
			}
			img{
				width:300px;
				height: 200px;
			}
		</style>
	</head>

	<body>
		<div>
			<h1 class="title">Avengers</h1>
			<div class="tips">
				<span><a href="#black">Black</a></span>
				<span><a href="#green">Green</a></span>
				<span><a href="#avenger">Avenger</a></span>
			</div>
			<div style="height: 100px;"></div>	
			<div id="black">
				<h2>Black</h2>
				<a href="work2.html" target="_blank"><img src="img/4.jpg" /></a>
				<span>this Black Panther</span>
			</div>
			<div style="height: 100px;"></div>
			<div id="green">
				<h2>Green</h2>
				<a href="work3.html" target="_blank"><img src="img/5.jpg" /></a>
				<span>this is HULK</span>
			</div>
			<div style="height: 100px;"></div>
			<div id="avenger">
				<h2>Avenger</h2>
				<a href="work4.html" target="_blank"><img src="img/3.jpg" /></a>
				<span>this is avengers picture</span>
			</div>
		</div>

	</body>

</html>